<template>
	<div class="list" ref="wrapper">
		<div>
			<div class="area">
				<div class="title border-topbottom">当前城市</div>
				<div class="button-list">
					<div class="button-wrapper">
						<div class="button">{{this.$store.state.city}}</div>
					</div>
				</div>
			</div>
			<div class="area">
				<div class="title border-topbottom">热门城市</div>
				<div class="button-list" >
					<div class="button-wrapper" v-for="item of hot" :key="item.id"   >
						<div class="button border-topbottom" @click="hotCityClick(item.name)">{{item.name}}</div>
					</div>
				</div>
			</div>
			<div class="area" v-for="(item,key) of cities" :key="key" :ref="key">
				<div class="title">{{key}}</div>
				<div class="item-list">
					<div class="item border-topbottom" v-for="innerItem of item" :key="innerItem.id" @click="hotCityClick(innerItem.name)">{{innerItem.name}}</div>
				</div>
			</div>
		</div>	
	</div>
</template>

<script>
	import BScroll from 'better-scroll'
	export default {
		name: 'cityList',
		props:{
			hot:Array,
			cities: Object,
			letter: String
		},
		watch: {
			letter() {
				if(this.letter){
					const element = this.$refs[this.letter][0]
					console.log(element)
					this.scroll.scrollToElement(element);
				}
				
			}
		},
		methods: {
			hotCityClick (city) {
				this.$store.dispatch('changeCity',city);
				this.$router.push('/')
			},
			cityClick(){
				console.log("123")
			}
		},
		mounted(){
			this.scroll = new BScroll(this.$refs.wrapper,{})
		}
	}
</script>

<style scoped lang="stylus">
	@import '~styles/varibles.styl'
	.list
	  position:absolute
	  top:1.58rem
	  left:0
	  right:0
	  bottom:0
	  overflow: hidden
		.title
		 line-height: .48rem
		 color: #666
		 background: #eee
		 padding-left: .2rem
		 font-size: .26rem
		.button-list 
		 padding: .1rem
		 overflow: hidden
		 .button-wrapper
		  float: left 
		  width: 33.33%
		  .button
		   text-align: center
		   margin: .1rem
		   border: .02rem solid #ccc
		   padding: .1rem 0
		.item-list
		 .item
		  line-height: .76rem
		  padding-left: .2rem
</style>
